/*	-------------------------------------------------------------

	Swirly Blue NoticeBoard

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Description:		Base Stylesheet
	Filename:		style.css

	Author:			Ben J
	Author Email:		ben.j42@gmail.com
	Author URL:		http://www.soul-scape.com/

	Version:		2.0
	Date:			1st June, 2007

memo to self:
http://dsingleton.co.uk/code/icon-selector/

	-------------------------------------------------------------	*/

/*	-------------------------------------------------------------

	Base Styles

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	body {
		background:#1B63B8 url('../images/bg.png') repeat-x bottom left;
		padding: 0;
		margin: 0;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size:12px;
		color: #000; }
	
	img {
		cursor: pointer;
	}
	
	div.template { display: none; }
				
	div#debug {
		background:#111;
		color:#888;
		width:0px;
		position:fixed; 
		bottom: 20px;
		left:20px;
		height:0px;
		overflow:auto;
		z-index: 1999999;
		font-family:"Courier", sans-serif;
		padding:10px 10px;
		text-align:left;
		border:2px solid #000;
		border-top:2px solid #222;
		border-left:2px solid #222;
		cursor: move;
		display: none; }
	div#debug-maximise {
		position: fixed;
		bottom: 20px;
		left: 20px;
		height: 32px;
		width: 32px;
		z-index: 2000000;
		background-image: url('../images/_NetworkOnline.png');
	}
	div#debug-options {
		margin-top: 28%;
		margin-left: 40%;
		display: none;
	}
	div#debug-maximise:hover {
		background-image: url('../images/~NetworkOnline.png');
	}
	div#debug p { margin-bottom:6px; }
		
		div#debug p.centred {
			font-family: sans-serif;
			font-weight: bold;
			text-align: center;
			margin-top: 28%;
		}

	div#opts {
		width: 133px;
		height: 48px;
		background-image: url('../img/opts.png');
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1000000;
		font-size: 10px;
		visibility: hidden;
		opacity: 0;
	}
	
	div.moreOpts {
		width: 133px;
		height: 48px;
		background-image: url('../img/opts.png');
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
		font-size: 10px;
		visibility: hidden;
		opacity: 0;
	}
	
	div#sbox {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1000000;
		height: 0px;
		width: 0px;
		border: 1px solid #2969C5;
		background-color: #5A91D5;
	}
	
	div#opts div { margin-top: 15px; }
	div.moreOpts div { margin-top: 15px; margin-left: -6px; }
	div#opts div a, a:link, a:visited, a:active { text-decoration: none; }
	div#opts div a:hover { text-decoration: underline; }
	#reactLink { color: #FF0A8D; }

	div#loadbox {
		background: url('../img/loader-bg.png') no-repeat left top;
		height: 35px;
		width: 163px;
		padding: 9px 12px;
		position: fixed;
		display: block;
		top: 50%;
		left: 50%;
		margin-top:-33px !important;
		margin-left:-81px;
		z-index: 2000001;
	}

		div#loadicon {
			background: url('../images/loader3.gif') no-repeat center left;
			height: 35px;
			width: 35px;
			float: left; }

		div#loadtext {
			font-size: 14px;
			padding: 8px 5px;
			color: #fff;
			text-shadow: 2px 2px 1px #27292a;
			float: center; }
		
		div#loadbarContainer {
			height: 4px;
			width: 60%;
			border: 1px black solid;
			background: white;
			margin-left: 28%;
			margin-top: -2.5%;
			visibility: hidden;
		}
			
			div#loadbar {
				height: 4px;
				width: 0%;
				background: #94CA10;
			}

	.lightbox {
		display: block;
		position: fixed;
		width: 100%;
		height:100%;
		z-index: 1000000;
		background: url('../img/lightbox.png'); }
		
	#imgbox {
		z-index:1000000;
		text-align:left;
		width:430px;
		position:absolute;
		top: 0pt;
		right: 30px;
		color:#111;
		visibility: hidden;
		background-color: #fff;
		padding: 15px;
	}
	
	.imgselect {
		display: block;
		height: 32px;
		width: 32px;
		float: left;
	}
	
	#extrasBox {
		display: block;
		float: left;
		width: auto;
	}
	
	.slideme .slideBack {
		height: 100%;
		width: 20px;
		cursor: pointer;
		background: url('../images/resultset_previous.png') #E6E6F6 no-repeat 50% 50%;
		display: block;
		float: left;
	}
	
	.slideme .slideBack:hover { 
		background-color: #E6F6F6;
	}

	.box {
		text-align:left;
		padding:0px;
		background:#fff;
		width:460px;
		position:absolute;
		top: 0pt;
		left: 0pt;
		color:#111;
		visibility: hidden;
		overflow: hidden;
	}

	.box label {
		margin-top:10px;
		display:block;
		font-size:10px;
		text-align:left;
		color:#888;
	}
	
	.box label.checkBox { display: inline; }

	#editnote {
		display:none; }

	#viewnote {
		display:none; }
	#loginBox .lightbox .box { visibility: visible; }
	#Options { display: none; }



		.box .closeBox {
			float:right;
			position:relative;
			top:10px;
			right:10px;
			text-decoration:none; }
		img.addUser {
			float: right;
			position: relative;
			right: 5px;
			bottom: 5px;
			text-decoration: none;
			z-index: 100;
		}
		#imgbox #closeImgbox {
			float:right;
			position:relative;
			top: -5px;
			right: 0px;
			margin-right: -5px;
			text-decoration:none; }

		.box #duedate, .duedate {
			font-size:24px;
			font-weight:bold;
			display:block;
			padding:10px 10px 0px 10px;
			margin:1px; }

		.box h2 {
			display:block;
			font-size:24px;
			padding:10px;
		}
		
		.box h2.lineup {
			display: inline;
			float: left;
		}
		
		.box h2.moveup {
			margin-top: -25px;
		}

		.box p {
			font-size:16px;
			margin:0px 30px 10px 30px; }
		
		.box .subOpts {
			margin:0px 30px 10px 30px;
			font-size: 16px;
			background: #F6F6F6;
			overflow: hidden;
		}
		
		.box .subOpts div {
			margin: 10px;
			overflow: hidden;
		}

		.box blockquote {
			font-size:12px;
			margin:0px 30px 10px 40px;
			padding:10px;
			border:1px solid #eee;
			color:#444; }

		.box code {
			display:block;
			font-size:12px;
			font-family:courier;
			margin:0px 30px 10px 40px;
			padding:10px;
			border:1px solid #eee;
			color:#444;
			overflow:auto; }
			
		div.slider {
			width: 20000px;
			overflow: hidden;
		}
		
		div.slideme {
			display: block;
			float: left;
			width: 460px;
		}

	div#header {
		background: url(../img/header_bg.png) top left repeat-x;
		height: 20px;
		padding: 13px;
		z-index: 999991;
		position: fixed;
		width: 100%;
		margin-top:0px; }


		h1#logo {
			background: url('../images/header_logo2.png') center no-repeat;
			height: 20px;
			width: 228px;
			margin: 0;
			margin-top: -2px;
			padding: 0;
			float: left;
			cursor: pointer; }

		div#menuitems {
			text-align:  right;
			padding-right: 20px; }

			div#menuitems a {
				display: block;
				float: right;
				margin: -7px 5px 10px;
				cursor: pointer; }
			
			.xx div#menuitems a#logout {
				background: url('../img/logout.png') no-repeat 50%;
				height: 20px;
				width: 18px;
			}
			
			.xx div#menuitems a#logout:hover {
				background-image: url('../img/logout-highlighted.png');
			}
			
			.xx div#menuitems a.silkico {
				height: 20px;
				width: 16px;
				display: none;
			}
			
			.xx div#menuitems a#moveAll { background: url('../img/arrow_in.png') no-repeat 50%; }
			.xx div#menuitems a#moveAll:hover { background-image: url('../img/arrow_in_highlighted.png'); }
			.xx div#menuitems a#alignToGrid { background: url('../img/align.png') no-repeat 50% }
			.xx div#menuitems a#alignToGrid:hover { background-image: url('../img/align_highlight.png'); }

			.xx a#add {
				background: url('../img/adnote_blue.png') center no-repeat;}
			.xx a#add:hover {
				background-image: url('../img/adnote_lightblue.png')}

			.xx a#save {
				background-image: url('../img/savechanges_blue.png');
				background-repeat: no-repeat;
				background-position: center;}
			.xx a#save:hover {
				background-image: url('../img/savechanges_lightblue.png');}
			.xx a#save.alert {
				background-image: url('../img/savechanges_orange.png');}
			.xx a#save.alert:hover { background-image: url('../img/savechanges_orange_highlight.png'); }

			.xx #menuitems span.warn {
				height: 20px;
				width: 91px;
				display: block; }




	div#cornerfolder {
		position:fixed;
		bottom:1px;
		right:1px;
		width:120px;
		height:100px;
		z-index:8000; }

	div#archive {
		display: block;
		position: fixed;
		width:100%;
		height: 0px;
		overflow: hidden;
		top:39px;
		z-index: 999999;
		background: url('../img/lightbox.png'); }
		
		.go {
			width: 16px;
			height: 16px;
			display: block;
			cursor: pointer;
		}
		
		.grey {
			cursor: default;
		}
		
		.butSpacer {
			display: block;
			height: 10px;
		}
		
		.noteSpacer {
			position: relative;
			height: 32px;
			width: 32px;
			background: none;
			float: left;
		}
		
		div#brleft {
			float: left;
			height: 60px;
			width: 16px;
			margin-left: 20px;
			padding-top: 15px;
		}
			div#brleft .First {background-image: url('../images/resultset_first.png');}
			div#brleft .First:hover {background-image: url('../images/resultset_first_highlight.png');}
			div#brleft .First.grey {background-image: url('../images/resultset_first_greyed.png');}
			div#brleft .Prev {background-image: url('../images/resultset_previous.png');}
			div#brleft .Prev:hover {background-image: url('../images/resultset_previous_highlight.png');}
			div#brleft .Prev.grey {background-image: url('../images/resultset_previous_greyed.png');}
		
		div#brright {
			float: right;
			height: 60px;
			width: 16px;
			margin-right: 20px;
			padding-top: 15px;
		}
			div#brright .Last {background-image: url('../images/resultset_last.png');}
			div#brright .Last:hover {background-image: url('../images/resultset_last_highlight.png');}
			div#brright .Last.grey {background-image: url('../images/resultset_last_greyed.png');}
			div#brright .Next {background-image: url('../images/resultset_next.png');}
			div#brright .Next:hover {background-image: url('../images/resultset_next_highlight.png');}
			div#brright .Next.grey {background-image: url('../images/resultset_next_greyed.png');}
		
		div#archive #containerContents {
			height: 40px;
			margin: 22px 20px;
			overflow: hidden;
		}

		div#archive #Contents {
			display:block;
			width: 50000px;
			overflow: hidden; }

			div#archive #Contents div.note {
				float:left !important;
				position:relative !important; }

			div#archive #Contents .clear {
				clear:left;
				display:block;
				height:1px; 
				font-size:1px;
				visibility:hidden; }

	form {
		padding: 0px 0px;
		margin: 0px;
		border: 0px;
		display: inline; }

	input, textarea, select {
		font-family: Arial, sans-serif, verdana;
		font-size: 12px;
		color: #000; }
		
	input.temp {
		color: #888;
		font-weight: bold;
	}

	input[disabled] {
		background:#eee;
		color:#a7a7a7; }

	input[type=text],
	input[type=password],
	textarea,
	select {
		font-size:12px;
		font-family:"arial";
		border: 1px solid #bbb;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		padding: 2px; }
	
	input[type=button], input[type=submit] {
		font-size:12px;
		font-family:"arial";
		border: 1px solid #ddd;
		border-bottom: 1px solid #bbb;
		border-right: 1px solid #bbb;
		padding: 2px;
		margin-top: 2px;
	}
	
	.subOpts input[type=button] { display: block; }

	input.bigtext {
		width:430px; 
		font-size: 24px; }
	
	input.bigtext.half {
		width: 215px;
	}

	select {
		padding: 1px; }
	select option {
		margin-right:20px; }

	textarea {
		width:430px;
		margin: 0px; }

	input.button {
		font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; padding:3px 4px; color: #FFFFFF; background: #0063DC; }

	.date {
		width:60px; }
	.date-dd, .date-mm {
		width:20px; }
	input.date, input.date-dd, input.date-mm {
		font-size: 18px;
		padding:2px 4px; }

	* {margin:0px;padding:0px;}
	html,body {
		height:100%;
		width:100%;}

	.subOpts div table {
		font-size: 12px;
		width: 75%;
	}

	a img {
		border:none; }


	#FolderContents .item {
		position:relative;
		margin:5px 20px 5px 20px; }

	#FolderContents .item a {
		position:absolute; }

div.icon {
		height: 32px;
		width: 32px;
		display: block;
		overflow: hidden;
		cursor: pointer;
		margin: 1px;
		float: left;
	}

div.note {
	height: 32px;
	width: 32px;
	position: absolute;
	cursor: pointer;
}

	.box p a:link {
		color: #0063DC;
		text-decoration: underline; }
	.box p a:visited {
		color: #2E67C7;
		text-decoration: underline; }
	.box p a:hover {
		color: #FFFFFF;
		text-decoration: none;
		background: #0063DC; }
	.box p a:active {
		color: #FFFFFF;
		text-decoration: none;
		background: #0259C4; }

ul#orderArchive {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.tool-tip {
	width: 190px;
	color: white;
	z-index: 999999;
}

.tool-title {
	padding-top: 15px;
	background: url('../img/tooltip-top.png') repeat-x top left;
}

.tool-text { background: url('../img/tooltip-bottom.png') repeat-x bottom left; }

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('../img/buttonbga.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px "Trebuchet MS", sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    outline: none; /* hide dotted outline in Firefox */}

a.button span {
    background: transparent url('../img/buttonbgspan.png') no-repeat;
    display: block;
    line-height: 18px;
    padding: 3px 0 3px 0px;}

a.button span strong {
    display: block;
    padding: 0px 0px 0px 30px;}

a.button:active {
    background-position: bottom right;
    color: #000;}

a.button:active span {
    background-position: bottom left;
    padding: 4px 0 2px 0px; /* push text down 1px */}

a.button:active span strong {
    padding-left:30px;}

a.button.alert span {background-image:url('../img/buttonbgspan_orange.png');}
a.button.alert {background-image:url('../img/buttonbga_orange.png');}
a.button.alert:active span {background-image:url('../img/buttonbgspan_orange.png');}
a.button.alert:active {background-image:url('../img/buttonbga_orange.png');}

a.button.secondary {
    background: transparent url('../img/buttonbga.png') no-repeat scroll top right;
    color: #aaa;}

a.button.secondary span {
    background: transparent url('../img/buttonbgspan.png') no-repeat;}

a.button.secondary:active {
    background-position: bottom right;
    color: #888;}

a.button.secondary:active span {
    background-position: bottom left;}

a.login.button {
	margin: 10px 0px 10px 0px;}

a.login.button strong {background:url('../icons/key.png') 8px 50% no-repeat;}

a#add.button strong {background:url('../icons/add.png') 8px 50% no-repeat;}
a#save.button strong, a#saveNote.button strong {background:url('../icons/disk.png') 11px 50% no-repeat;padding-left:34px;}
a#moveAll.button strong {background:url('../icons/arrow_in.png') 11px 50% no-repeat;padding-left:34px;}
a#alignToGrid.button strong {background:url('../icons/application_view_tile.png') 10px 50% no-repeat;padding-left:32px;}
a#logout.button strong {background:url('../icons/door_in.png') 8px 50% no-repeat;}
a#closeViewNote.button strong, a#closeEditNote.button strong {background:url('../icons/cross.png') 10px 50% no-repeat;padding-left:33px;}
a#editThisNote.button strong {background:url('../icons/pencil_go.png') 8px 50% no-repeat;}
a.button.saveUser strong {background:url('../icons/add.png') 8px 50% no-repeat;}
a.button.editUser strong {background:url('../icons/pencil_go.png') 8px 50% no-repeat;}




x#menuitems a.button span strong {background:url('../icons/add.png') 5px 50% no-repeat;}

	.optionbar {
		background:#000;
		clear:both;
		display:block;
		text-align:right;
		height:34px; }

	.optionbar a.button {
		float:right;
		margin-top:5px;}

	.box {
		border:6px solid #0A2043;}

#countdown {
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	height: 34px;
	line-height: 34px;
	padding-left: 10px;
}

#viewnote div.container {
	float: left;
	text-align: left;
	width: 55%;
	overflow: hidden;
	height: 34px;
}

.urgent { color: #F11; }
.optionbar.urgent { background-color: #f11; color: #111 }
.optionbar.inactive { background-color: #CDCDCD; }
.optionbar.safe { background-color: #08A70B; }

span strong {font-weight:normal;}

